import React, {Component} from 'react';
import {Breadcrumb, Button, Layout, Menu} from "antd";
import { withRouter } from "react-router-dom";
import {TeamOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons';
import ComHeader from './common/Header'
import UserInfo from './user/UserInfo'
import {BrowserRouter as Router, Route, NavLink, Link} from "react-router-dom";
import {adminRoutes} from '../router/Router'
const routes = adminRoutes.filter(route => route.isShow);
const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;
function Index(props) {
    console.log(props);
    return (
        <div>
            <Layout>
                <Header className="header">
                    {/*导航栏外部组件*/}
                    <ComHeader/>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{height: '100%', borderRight: 0}}
                        >
                            {routes.map(route => {
                                return (
                                    <Menu.Item
                                        key={route.path}
                                        onClick={p => props.history.push(p.key)}
                                    >
                                        <TeamOutlined />
                                        {route.title}
                                    </Menu.Item>
                                )
                            })}
                        </Menu>
                    </Sider>
                    <Layout style={{padding: '0 24px 24px'}}>
                        {/*面包屑区域*/}
                      {/*  <Breadcrumb style={{margin: '16px 0'}}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>*/}
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            {props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </div>
    )
}
export default (withRouter(Index));
